﻿<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>app后台设置</title>
    <link href="../lib/bootstrap/dist/css/bootstrap.css" rel="stylesheet" />
    <link href="../css/site.css" rel="stylesheet" />
</head>
<body>
    <div id="app" v-cloak style="padding-bottom:60px;">
        <div style="background-color:#292D32;">
            <div class="center-block" style="width:1200px;">
                <!--导航区-->
                <ul class="nav nav-tabs" role="tablist">
                    <li role="presentation" class="active"><a href="#Job" role="tab" data-toggle="tab">面试岗位设置</a></li>
                    <li role="presentation"><a href="#quizzes" role="tab" @click="set_job_id_index" data-toggle="tab">添加面试题</a></li>
                    <li role="presentation"><a href="#exam_data_pane" role="tab" @click="get_exam_data" data-toggle="tab">查看面试题</a></li>
                    <li role="presentation"><a href="#exam_data_consult" @click="get_user_answer" role="tab" data-toggle="tab">查阅面试题</a> </li>
                    <li role="presentation"><a href="" @click="signUp" class="btn btn-primary">注销</a></li>
                </ul>
            </div>
        </div>

        <div id="main_content">
            <!--面板区-->
            <div class="center-block tab-content" style="width:1200px;min-height:600px;">

                <!--面试岗位设置-->
                <div role="tabpanel" class="tab-pane active" id="Job">
                    <!--添加岗位-->
                    <div class="text-center" style="min-height:60px;line-height:60px;">
                        <form role="form" class="form-inline">
                            <input type="text" v-model="add_job_name" class="form-control" placeholder="岗位名称" />
                            <button @click="add_job" type="button" class="btn">添加</button>
                        </form>
                    </div>

                    <!--显示岗位列表-->
                    <div>
                        <table class="table table-bordered table-striped">
                            <tr>
                                <td>岗位名称</td>
                                <td>状态</td>
                                <td>添加时间</td>
                                <td>改变状态</td>
                                <td>删除岗位</td>
                            </tr>
                            <tr v-for="(item,index) in job_name_list">
                                <td>{{item.job_name}}</td>
                                <td>
                                    <template v-if="item.is_enabled">
                                        正常
                                    </template>
                                    <template v-if="item.is_enabled==false">
                                        禁用
                                    </template>
                                </td>
                                <td>{{item.addtime | format_date}}</td>
                                <td>
                                    <button @click="change_job_state(index)" v-bind:class="{'btn-primary':item.is_enabled,'btn-warning':!item.is_enabled}" class="btn" type="button">
                                        <template v-if="item.is_enabled">
                                            禁用
                                        </template>
                                        <template v-if="item.is_enabled==false">
                                            恢复
                                        </template>
                                    </button>
                                </td>
                                <td>
                                    <button @click="delete_job_type(index)" class="btn btn-primary" type="button">删除</button>
                                </td>
                            </tr>
                        </table>
                    </div>
                </div>

                <!--添加面试题-->
                <div role="tabpanel" class="tab-pane" id="quizzes">
                    <!--新增试题的表单-->
                    <div class="text-center container-fluid" style="width:500px;padding-top:30px;">
                        <form role="form" class="form-horizontal">
                            <div class="form-group">
                                <label class="col-md-3 control-label">岗位名称:</label>
                                <div class="col-md-9">
                                    <select class="form-control" v-model="exam_data.job_id">
                                        <option v-for="(item,index) in job_name_list" :value="item.uuid">{{item.job_name}}</option>
                                    </select>
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-md-3 control-label">试题类型</label>
                                <div class="col-md-9">
                                    <select class="form-control" v-model="exam_data.exam_type">
                                        <option value="cq">选择题</option>
                                        <option value="eq">笔试题</option>
                                    </select>
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-md-3 control-label">问题内容</label>
                                <div class="col-md-9">
                                    <textarea class="form-control" rows="5" v-model="exam_data.exam_content" placeholder="请输入问题内容"></textarea>
                                </div>
                            </div>

                            <template v-if="this.exam_data.exam_type=='eq'">
                                <div class="form-group">
                                    <label class="col-md-3 control-label">参考答案</label>
                                    <div class="col-md-9">
                                        <textarea class="form-control" rows="5" v-model="exam_data.exam_eq_answer" placeholder="请输入参考答案"></textarea>
                                    </div>
                                </div>
                            </template>

                            <template v-if="this.exam_data.exam_type=='cq'">
                                <div class="form-group">
                                    <label class="col-md-3 control-label">答案</label>
                                    <div class="col-md-9">
                                        <select class="form-control" v-model="exam_data.exam_cq_anwser">
                                            <option value="A">A</option>
                                            <option value="B">B</option>
                                            <option value="C">C</option>
                                            <option value="D">D</option>
                                        </select>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="col-md-3 control-label">选项A</label>
                                    <div class="col-md-9">
                                        <input type="text" class="form-control" v-model="exam_data.anwser_a" placeholder="请输入选项A的内容" />
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="col-md-3 control-label">选项B</label>
                                    <div class="col-md-9">
                                        <input type="text" class="form-control" v-model="exam_data.anwser_b" placeholder="请输入选项B的内容" />
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="col-md-3 control-label">选项C</label>
                                    <div class="col-md-9">
                                        <input type="text" class="form-control" v-model="exam_data.anwser_c" placeholder="请输入选项C的内容" />
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="col-md-3 control-label">选项D</label>
                                    <div class="col-md-9">
                                        <input type="text" class="form-control" v-model="exam_data.anwser_d" placeholder="请输入选项D的内容" />
                                    </div>
                                </div>
                            </template>

                            <div class="form-group">
                                <div class="col-md-2 col-md-offset-3">
                                    <button @click="add_exam_data" class="btn btn-primary" type="button">添加</button>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>

                <!-- 查看面试题 -->
                <div role="tabpanel" class="tab-pane" id="exam_data_pane">
                    <div>
                        <div class="center-block container-fluid" style="width:500px;padding-top:30px;padding-bottom:30px;">
                            <select @change="change_show_exam_data" class="form-control" v-model="show_exam_data.job_id">
                                <option v-for="(item,index) in job_name_list" :value="item.uuid">{{item.job_name}}</option>
                            </select>
                        </div>
                    </div>

                    <div>
                        <table class="table table-bordered table-striped">
                            <tr>
                                <td>试题类型</td>
                                <td>试题内容</td>
                                <td>试题答案</td>
                                <td>选项内容</td>
                                <td>操作</td>
                            </tr>
                            <tr v-for="(item,index) in show_exam_data.list">
                                <td>
                                    <template v-if="item.exam_type=='cq'">
                                        选择题
                                    </template>
                                    <template v-if="item.exam_type=='eq'">
                                        笔试题
                                    </template>
                                </td>
                                <td>{{item.exam_content}}</td>
                                <td>
                                    <template v-if="item.exam_type=='cq'">
                                        {{item.exam_cq_anwser}}
                                    </template>
                                    <template v-if="item.exam_type=='eq'">
                                        {{item.exam_eq_answer}}
                                    </template>
                                </td>
                                <td>
                                    <template v-if="item.exam_type=='cq'">
                                        A.{{item.anwser_a}}
                                        B.{{item.anwser_b}}
                                        C.{{item.anwser_b}}
                                        D.{{item.anwser_d}}
                                    </template>
                                </td>
                                <td>
                                    <button @click="disable_exam(index)" v-bind:class="{'btn-primary':item.is_enabled,'btn-warning':!item.is_enabled}" class="btn" type="button">
                                        <template v-if="item.is_enabled==true">
                                            禁用
                                        </template>
                                        <template v-if="item.is_enabled==false">
                                            恢复
                                        </template>
                                    </button>
                                </td>
                            </tr>
                        </table>
                        <!-- 分页按钮 -->
                        <div v-on:click="getPageInfoProxy($event)" v-html="this.show_exam_data.pages"></div>
                    </div>
                </div>

                <!--查阅面试题-->
                <div id="exam_data_consult" role="tabpanel" class="tab-pane">
                    <div v-if="show_user_answer.show==false">
                        <div>
                            <div class="center-block container-fluid" style="width:500px;padding-top:30px;padding-bottom:30px;">
                                <select @change="change_show_exam_data" class="form-control" v-model="show_exam_data.job_id">
                                    <option v-for="(item,index) in job_name_list" :value="item.uuid">{{item.job_name}}</option>
                                </select>
                            </div>
                        </div>
                        <div>
                            <table class="table table-bordered table-striped">
                                <tr>
                                    <td>用户名</td>
                                    <td>手机号</td>
                                    <td>邮箱</td>
                                    <td>选择题正确数量</td>
                                    <td>笔试题分数</td>
                                    <td>答题日期</td>
                                    <td>查看试题详情</td>
                                    <td>设置邀请码</td>
                                </tr>
                                <tr v-for="(item,index) in user_exam_list.list">
                                    <td>{{item.uname}}</td>
                                    <td>{{item.phone}}</td>
                                    <td>{{item.email}}</td>
                                    <td>{{item.cq_score}}</td>
                                    <td>{{item.eq_score}}</td>
                                    <td>{{item.addtime | format_date}}</td>
                                    <td><button type="button" @click="get_user_answer_by_id(index)" class="btn btn-primary">查看笔试题</button></td>
                                    <td v-bind:title="item.invitation_code.length==0 ? '面试邀请码':item.invitation_code">
                                        <button type="button" @click="set_invitation_code(index)" v-bind:class="{'btn-primary':item.invitation_code.length==0,'btn-warning':item.invitation_code.length>0}" class="btn">
                                            <template v-if="item.invitation_code.length==0">
                                                生成邀请码
                                            </template>
                                            <template v-if="item.invitation_code.length>0">
                                                取消邀请码
                                            </template>
                                        </button>
                                    </td>
                                </tr>
                            </table>
                        </div>
                    </div>

                    <div v-if="show_user_answer.show">
                        <div>
                            <div class="col-lg-6 col-lg-offset-3 text-center h3">{{show_user_answer.uname}}的测试题答案</div>
                            <div class="col-lg-3 text-right h3">
                                <button @click="change_show_user_answer" class="btn btn-info btn-default" type="button">返回</button>
                            </div>
                        </div>
                        <div>
                            <template v-for="(item,index) in show_user_answer.list">
                                <div class="lead">{{index+1}}. {{item.exam_content}}</div>
                                <div class="text-primary h5">参考答案:{{item.exam_type=='cq' ? item.exam_cq_anwser : item.exam_eq_answer}}</div>
                                <div class="text-primary h5">用户的答案:{{item.exam_answer}}</div>
                            </template>
                            <div class="text-center">
                                <form role="form" class="form-inline">
                                    <input type="number" class="form-control" v-model="show_user_answer.score" placeholder="笔试题的分数0-100之间" />
                                    <button @click="set_user_score" class="btn btn-primary" type="button">保存</button>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>

            </div>
        </div>

    </div>

    <div class="container body-content navbar-fixed-bottom">
        <hr />
        <footer style="width:1200px;" class="center-block text-center navbar-fixed-bottom">
            <p>&copy; 2018 - 江郎才尽- s694060865@gmail.com</p>
        </footer>
    </div>

    <script src="../lib/jquery/dist/jquery.js"></script>
    <script src="../lib/bootstrap/dist/js/bootstrap.js"></script>
    <script src="../js/vue.js"></script>
    <script src="../js/vue-resource.js"></script>
    <script src="../lib/laydate/laydate.js"></script>
    <script src="../js/site.js"></script>
    <script type="text/javascript">
        var vm = new Vue({
            el: "#app",
            data: {
                add_job_name: '',   // 新增 岗位名称 的绑定变量名
                // 登录的用户数据
                signUserData: {
                    auth_role: ''
                },
                // 岗位列表 json 数据, 初始化的时候加载
                job_name_list: {},
                // 试题json数据列表
                user_exam_list: {
                    list: {},
                    pages: ''
                },
                // 新增试题的表单绑定数据
                exam_data: {
                    job_id: '',         // 岗位的id, 不同的岗位对应不同的问题
                    exam_type: 'cq',    // 问题类型
                    exam_content: '',   // 问题的内容
                    exam_cq_anwser: 'A',    // 选择题参考答案
                    exam_eq_answer: '', // 笔试题参考答案
                    anwser_a: '',
                    anwser_b: '',
                    anwser_c: '',
                    anwser_d: ''
                },
                // 查看试题数据
                show_exam_data: {
                    job_id: '', // 选中的岗位名称, 根据不同的名称加载不同的数据
                    list: {},   // 翻页数据
                    pages: ''   // 翻页按钮
                },
                // 根据user_socre_id 查询的用户测试题数据
                show_user_answer: {
                    user_score_id: '',  // user_score表的主键
                    uname: '',  // 测试题答案的用户名
                    list: {},
                    score: 0,   // 笔试题的分数
                    show: false // 默认隐藏, 显示所有用户的测试题列表
                }
            },
            mounted: function () {
                if (getCookie("token").length > 0) {
                    // 有token, 但是可能过期, 隐藏登陆和注册按钮
                    this.$data.hasToken = true;
                    this.testToken();   // 验证token是否有效
                    // 加载面试岗位
                    this.get_job_names();
                } else {
                    // 跳转到登录页
                    location.href = '/app/index.html';
                }
            },
            methods: {
                // 验证token是否有效的方法
                testToken: function () {
                    this.$http({
                        method: 'post',
                        url: '/api/account/CheckToken',
                        timeout: 3000,
                    }).then(function (response) {
                        console.info(response.body);
                        if (response.body == 'user') {
                            location.href = '/app/index.html';
                        } else if (response.body == 'company') {
                            this.signUserData.auth_role = 'company';
                        }
                    });
                },
                // 注销
                signUp: function () {
                    setCookie("token", '');
                    location.href = "/app/index.html"
                },
                // 新增岗位的方法
                add_job: function () {
                    if ($.trim(this.add_job_name).length == 0) {
                        alert("请输入岗位名称");
                        return;
                    }
                    this.$http({
                        method: 'post',
                        url: '/api/Company/AddJobType',
                        timeout: 3000,
                        body: { job_name: this.add_job_name }
                    }).then(function (response) {
                        this.add_job_name = '';
                        // 重新加载最新的岗位
                        console.info(response.body);
                        this.job_name_list = response.body;
                    });
                },
                // 首次加载以及 添加或者删除之后获取最新的 岗位列表
                get_job_names: function () {
                    this.$http({
                        method: 'post',
                        url: '/api/Company/get_job_names',
                        timeout: 3000,
                    }).then(function (response) {
                        console.info(response.body);
                        this.job_name_list = response.body;
                        // 重新加载最新的岗位
                    });
                },
                // 修改岗位的状态
                change_job_state: function (index) {
                    var state = !this.job_name_list[index].is_enabled;
                    this.$http({
                        method: 'post',
                        url: '/api/Company/change_job_state/' + this.job_name_list[index].uuid,
                        timeout: 3000,
                        body: { state: state }
                    }).then(function (response) {
                        console.info(response.body);
                        // 修改岗位的状态
                        this.job_name_list[index].is_enabled = state;
                    });
                },
                // 删除岗位名称
                delete_job_type: function (index) {
                    this.$http({
                        method: 'post',
                        url: '/api/Company/delete_job_type/' + this.job_name_list[index].uuid,
                        timeout: 3000
                    }).then(function (response) {
                        console.info(response.body);
                        // 修改岗位的状态
                        if (response.body == 'ok') {
                            // 从指定的索引位置删除 1个 元素,v-for 重新渲染
                            this.job_name_list.splice(index, 1);
                        } else {
                            alert(response.body);
                        }
                    });
                },
                // 设置下拉框选中默认值
                set_job_id_index: function () {
                    if (this.exam_data.job_id.length == 0 && this.job_name_list.length > 0) {
                        this.exam_data.job_id = this.job_name_list[0].uuid;
                    }
                },
                // 添加测试题
                add_exam_data: function () {
                    this.$http({
                        method: 'post',
                        url: '/api/Company/add_exam_data',
                        timeout: 3000,
                        body: { model: this.exam_data }
                    }).then(function (response) {
                        console.info(response.body);
                        this.show_exam_data = {};
                        alert(response.body);
                    });
                },
                // 初始化测试题数据, 并且初始化下拉框的内容
                get_exam_data: function () {
                    if (this.show_exam_data.job_id.length == 0 && this.job_name_list.length > 0) {
                        this.show_exam_data.job_id = this.job_name_list[0].uuid;    // 设置默认选中
                    }
                    if (this.show_exam_data.job_id.length > 0) {
                        this.$http({
                            method: 'post',
                            url: '/api/Company/get_exam_data',
                            timeout: 3000,
                            body: { job_id: this.show_exam_data.job_id }
                        }).then(function (response) {
                            this.show_exam_data.list = response.body.list;
                            this.show_exam_data.pages = response.body.pages;
                        });
                    }
                },
                // 下拉框改变的时候显示不同的岗位 试题数据
                change_show_exam_data: function () {
                    this.$http({
                        method: 'post',
                        url: '/api/Company/get_exam_data',
                        timeout: 3000,
                        body: { job_id: this.show_exam_data.job_id }
                    }).then(function (response) {
                        console.info(response.body);
                        this.show_exam_data.list = response.body.list;
                        this.show_exam_data.pages = response.body.pages;
                    });
                },
                // 翻页
                getPageInfo: function (url) {
                    this.$http({
                        method: 'post',
                        url: url,
                        timeout: 3000
                    }).then(function (response) {
                        console.info(response.body);
                        this.show_exam_data.list = response.body.list;
                        this.show_exam_data.pages = response.body.pages;
                    });
                },
                // 翻页的事件代理
                getPageInfoProxy: function (event) {
                    if (event.target.nodeName.toLowerCase() == 'a') {
                        console.log($(event.target).attr("data-url"));
                        this.getPageInfo($(event.target).attr("data-url"));
                    }
                },
                // 禁用指定的试题
                disable_exam: function (index) {
                    console.log(this.show_exam_data.list[index].id);
                    console.log(this.show_exam_data.list[index].is_enabled);
                    var state = !this.show_exam_data.list[index].is_enabled;
                    this.$http({
                        method: 'post',
                        url: "/api/company/disable_exam/" + this.show_exam_data.list[index].id,
                        timeout: 3000,
                        body: { state: state }
                    }).then(function (response) {
                        console.info(response.body);
                        this.show_exam_data.list[index].is_enabled = state;
                    });
                },
                // 根据岗位获取用户测试题答案数据
                get_user_answer: function () {
                    if (this.show_exam_data.job_id.length == 0 && this.job_name_list.length > 0) {
                        this.show_exam_data.job_id = this.job_name_list[0].uuid;    // 设置默认选中
                    }
                    if (this.show_exam_data.job_id.length > 0) {
                        this.$http({
                            method: 'post',
                            url: "/api/company/get_user_answer/" + this.show_exam_data.job_id,
                            timeout: 3000
                        }).then(function (response) {
                            this.user_exam_list.list = response.body.list;
                            this.user_exam_list.pages = response.body.pages;
                        });
                    }
                },
                // 根据用户测试题记录表的id 获取指定用户的测试题答案数据
                get_user_answer_by_id: function (index) {
                    var id = this.user_exam_list.list[index].id;
                    this.show_user_answer.user_score_id = id;
                    this.show_user_answer.uname = this.user_exam_list.list[index].uname;
                    this.$http({
                        method: 'post',
                        url: "/api/company/get_user_answer_by_id/" + id,
                        timeout: 3000
                    }).then(function (response) {
                        console.info(response.body);
                        this.show_user_answer.list = response.body;
                        this.show_user_answer.show = true;
                    });
                },
                // 返回按钮, 切换到用户测试题列表页
                change_show_user_answer: function () {
                    this.show_user_answer.show = false;
                },
                // 设置用户笔试题的分数
                set_user_score: function () {
                    var id = this.show_user_answer.user_score_id;
                    this.$http({
                        method: 'post',
                        url: "/api/company/set_user_score/" + id,
                        timeout: 3000,
                        body: { score: this.show_user_answer.score }
                    }).then(function (response) {
                        console.info(response.body);
                        alert(response.body);
                        location.reload();
                    });
                },
                // 设置或者清除邀请码
                set_invitation_code: function (index) {
                    this.$http({
                        method: 'post',
                        url: "/api/company/set_invitation_code/" + this.user_exam_list.list[index].id,
                        timeout: 3000
                    }).then(function (response) {
                        console.info(response.body);
                        if (response.body.result = true) {
                            this.user_exam_list.list[index].invitation_code = response.body.message;
                        } else {
                            alert(response.body.message);
                        }
                    });
                }
            }
        });
    </script>
</body>
</html>